<template>
  <div class="orderDetailCont" :style="'min-height: ' + docheight + 'px'">
    <div class="haspadding" v-if="!showTimeOut && showCont">
      <div class="addressCont">
        <div class="addressItem">
          <div class="addressImg" v-if="orderDetail.user_name">
            {{ orderDetail.user_name.charAt(0) }}
          </div>
          <div class="addressInfo">
            <div class="infoTop">
              <div class="userName">{{ orderDetail.user_name }}</div>
              <div class="userTel">{{ orderDetail.user_phone }}</div>
            </div>
            <div class="infoAddress">
              {{ orderDetail.service_address + orderDetail.house_number }}
            </div>
          </div>
        </div>
      </div>
      <div class="userCont">
        <div class="userImg">
          <img :src="orderDetail.technician_head_img" />
        </div>
        <div class="userInfo">
          <div class="userName">
            <div class="nameVal">{{ orderDetail.technician_nick_name }}</div>
            <div class="regTag">认证</div>
          </div>
          <div class="rateCont">
            <van-rate
              color="#4fc763"
              size="14px"
              v-model="orderDetail.rateNum"
              readonly
              allow-half
            />
            <div class="tateVal">好评 {{ orderDetail.rate }} 分</div>
          </div>
        </div>
      </div>
      <div class="verification_code" v-if="orderDetail.order_status == 3">
        <div>核销码</div>
        <div class="codeNum">{{ orderDetail.verification_code }}</div>
      </div>
      <div class="detailInfo">
        <div class="shopTop">
          <div class="shopNameCont">
            <div class="shopName">订单号：{{ orderDetail.order_number }}</div>
          </div>
          <div class="orderStatus">
            <span v-if="orderDetail.order_status == 1">待付款</span>
            <span v-if="orderDetail.order_status == 2">待接单</span>
            <span v-if="orderDetail.order_status == 3">待服务</span>
            <span v-if="orderDetail.order_status == 5">已完成</span>
            <span v-if="orderDetail.order_status == 6">已关闭</span>
            <span v-if="orderDetail.order_status == 7">已退款</span>
          </div>
        </div>
        <div class="goodsList">
          <div class="goodsItem">
            <div class="goodsImg">
              <img :src="orderDetail.package_cover + ossSrc" />
            </div>
            <div class="goodsInfo">
              <div class="goodsName">{{ orderDetail.package_name }}</div>
              <!-- <div class="orderTime">预约时间：{{ orderDetail.service_time }}</div> -->
              <div class="goodsType">
                <div class="goodsTypeItem">
                  {{ orderDetail.package_effect }}
                </div>
                <div class="order_cont">x{{ orderDetail.num }}</div>
              </div>
              <div class="goodsInfoPrice">
                <div>单价:¥{{ orderDetail.package_price }}</div>
                <div>{{ orderDetail.package_time }} 分钟</div>
              </div>
            </div>
          </div>
        </div>
        <div class="formCont">
          <div class="formItem">
            <div class="formName">实付金额</div>
            <div style="color: #4fc763">
              ￥{{ orderDetail.order_total_price }}
            </div>
          </div>
          <div class="formItem">
            <div class="formName">项目金额</div>
            <div>
              ¥{{
                (
                  Number(orderDetail.package_price) * Number(orderDetail.num)
                ).toFixed(2)
              }}
            </div>
          </div>
          <div class="formItem">
            <div class="formName">服务时长</div>
            <div>
              {{ Number(orderDetail.package_time) * Number(orderDetail.num) }}
              分钟
            </div>
          </div>
          <div class="formItem">
            <div class="formName">车费</div>
            <div>¥{{ orderDetail.car_price }}</div>
          </div>
          <div class="formItem" v-if="orderDetail.jz_num">
            <div class="formName">加钟数量</div>
            <div>{{ orderDetail.jz_num }}个钟</div>
          </div>
          <div class="formItem" v-if="orderDetail.jz_num">
            <div class="formName">加钟时长</div>
            <div>
              {{
                Number(orderDetail.jz_num) * Number(orderDetail.package_time)
              }}分钟
            </div>
          </div>
          <div class="formItem" v-if="orderDetail.jz_money">
            <div class="formName">加钟费用</div>
            <div>¥{{ orderDetail.jz_money }}</div>
          </div>
          <div class="formItem">
            <div class="formName">下单时间</div>
            <div>{{ orderDetail.create_time }}</div>
          </div>
          <div class="formItem" v-if="orderDetail.order_pay_time">
            <div class="formName">支付时间</div>
            <div>{{ orderDetail.order_pay_time }}</div>
          </div>
          <div class="formItem" v-if="orderDetail.receiving_order_time">
            <div class="formName">接单时间</div>
            <div>{{ orderDetail.receiving_order_time }}</div>
          </div>
          <div class="formItem" v-if="orderDetail.order_status == 5">
            <div class="formName">核销时间</div>
            <div>{{ orderDetail.check_time }}</div>
          </div>
          <div class="formItem" v-if="orderDetail.service_time">
            <div class="formName">预约时间</div>
            <div>{{ orderDetail.service_time }}</div>
          </div>
          <div class="formItem" v-if="orderDetail.order_status == 7">
            <div class="formName">退款时间</div>
            <div>¥{{ orderDetail.refund_time }}</div>
          </div>
          <div class="formItem" v-if="orderDetail.order_status == 7">
            <div class="formName">退款金额</div>
            <div>¥{{ orderDetail.refund_money }}</div>
          </div>
          <div class="formItem" v-if="orderDetail.order_status == 7">
            <div class="formName">退款原因</div>
            <div class="formVal">{{ orderDetail.close_reason }}</div>
          </div>
          <div class="formItem" style="border-bottom: none">
            <div class="formName">订单备注</div>
            <div>
              {{
                orderDetail.service_remark
                  ? orderDetail.service_remark
                  : "无备注"
              }}
            </div>
          </div>
        </div>
      </div>
      <div
        class="formTip"
        v-if="orderDetail.order_status == 5 && orderDetail.is_report == 1"
      >
        <span
          >举报有奖：若技师存在违规行为(例如：线下交易、违规服务、色情服务等)，请<span
            class="reportBtn"
            @click="reportFn"
            >立即举报</span
          >!</span
        >
      </div>
      <div class="ctrlCont">
        <div
          class="orderBtn greenBtn"
          v-if="orderDetail.order_status == 1"
          @click="surePay(orderDetail)"
        >
          立即支付
        </div>
        <div
          class="orderBtn blackBtn"
          v-if="
            orderDetail.order_status == 1 ||
              orderDetail.order_status == 2 ||
              orderDetail.order_status == 3
          "
          @click="ctrlFn(1)"
        >
          取消订单
        </div>
        <div
          class="orderBtn blackBtn"
          @click="ctrlFn(2)"
          v-if="
            (orderDetail.order_status == 5 && orderDetail.is_report == 1) ||
              orderDetail.order_status == 6
          "
        >
          删除订单
        </div>
        <div
          class="orderBtn pinkBtn"
          @click="replayOrderFn(orderDetail)"
          v-if="orderDetail.order_status == 5 && orderDetail.is_evaluate == 1"
        >
          评价订单
        </div>
      </div>
    </div>
    <van-popup v-model:show="showConfirm" round position="bottom">
      <div class="orderMask">
        <div class="maskTitle">{{ maskTitle }}</div>
        <div class="maskTip">{{ maskTipCont }}</div>
        <div class="maskTip Money">{{ maskTipMoney }}</div>
        <saveBtn
          color="#4fc763"
          style="width: 100%;margin-top: 0.75rem;"
          :value="maskBtnCont"
          @saveClick="sureMask"
        ></saveBtn>
      </div>
    </van-popup>
    <toast
      v-model="showToast"
      position="middle"
      width="50%"
      type="text"
      :time="1000"
      >{{ showText }}</toast
    >
    <getLoad v-if="!showCont"></getLoad>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
    <sub-load v-if="showLoad"></sub-load>
  </div>
</template>

<script>
import {
  orderDetails,
  orderCancel,
  orderPay,
  orderDel,
  orderCancelMsg
} from "@/http/api";
import { Toast, Confirm } from "vux";
import SaveBtn from "@/components/public/saveBtn.vue";
import WeixinJSBridge from "weixin-js-sdk";

import getLoad from "@/components/public/getLoad";
import getTimeOut from "@/components/public/getTimeOut";
import subLoad from "@/components/public/subLoad.vue";
export default {
  components: { SaveBtn, subLoad, getTimeOut, getLoad, Toast, Confirm },
  data() {
    return {
      showLoad: false,
      showTimeOut: false,
      showCont: false,
      showText: "",
      showToast: false,
      orderDetail: {},
      order_id: this.$route.query.id,
      star_rating: 3,
      showConfirm: false,
      ctrlStatus: "",
      confirmTip: "",
      maskTitle: "",
      maskTipCont: "",
      maskTipMoney: "",
      maskBtnCont: ""
    };
  },
  methods: {
    reportFn() {
      this.$router.push({ path: "/reportOrder", query: { id: this.order_id } });
    },
    replayOrderFn() {
      this.$router.push({ path: "/replayOrder", query: { id: this.order_id } });
    },
    ctrlFn(num) {
      this.activeIndex = num;
      if (num == 1) {
        if (this.orderDetail.order_status != 1) {
          this.maskTitle = "取消订单提示";
          this.maskBtnCont = "确认取消";
          this.getCancelMsg();
        } else {
          this.canceFn();
        }
      } else if (num == 2) {
        this.maskTitle = "删除订单提示";
        this.maskTipCont = "确定要删除此订单吗？订单删除后将无法恢复。";
        this.maskBtnCont = "确认删除";
        this.showConfirm = true;
      }
    },
    sureMask() {
      if (this.activeIndex == 1) {
        this.canceFn();
      } else if (this.activeIndex == 2) {
        this.delFn();
      }
    },
    getCancelMsg() {
      let data = {
        order_id: this.order_id
      };
      orderCancelMsg(data)
        .then(res => {
          if (res.data.code == 1) {
            this.maskTipCont = "退款说明：" + res.data.data.msg;
            this.maskTipMoney = "退款金额：" + res.data.data.money + "元";
            this.showConfirm = true;
          } else {
            this.showToast = true;
            this.showText = res.data.msg;
          }
          this.showLoad = false;
        })
        .catch(() => {
          this.showLoad = false;
          this.showToast = true;
          this.showText = "网络请求超时";
        });
    },
    delFn() {
      let data = {
        order_id: this.order_id
      };
      if (!this.showLoad) {
        this.showLoad = true;
        this.showConfirm = false;
        orderDel(data)
          .then(res => {
            this.showToast = true;
            if (res.data.code == 1) {
              this.showText = "删除成功";
              setTimeout(() => {
                this.$router.push({ path: "/order" });
              }, 1500);
            } else {
              this.showText = res.data.msg;
            }
            this.showLoad = false;
          })
          .catch(() => {
            this.showLoad = false;
            this.showToast = true;
            this.showText = "网络请求超时";
          });
      }
    },
    canceFn() {
      let data = {
        order_id: this.order_id
      };
      if (!this.showLoad) {
        this.showLoad = true;
        orderCancel(data)
          .then(res => {
            if (res.data.code == 1) {
              this.getData();
              this.showConfirm = false;
              this.showToast = true;
              this.showText = "订单取消成功";
            } else {
              this.showToast = true;
              this.showText = "订单取消失败";
            }
            this.showLoad = false;
          })
          .catch(() => {
            this.showLoad = false;
            this.showToast = true;
            this.showText = "网络请求超时";
          });
      }
    },
    surePay() {
      let data = {
        order_id: this.order_id
      };
      if (!this.showLoad) {
        this.showLoad = true;
        orderPay(data)
          .then(res => {
            if (res.data.code == 1) {
              WeixinJSBridge.invoke(
                "getBrandWCPayRequest",
                {
                  appId: res.data.data.appId, //公众号ID，由商户传入
                  timeStamp: res.data.data.timeStamp, //时间戳，自1970年以来的秒数
                  nonceStr: res.data.data.nonceStr, //随机串
                  package: res.data.data.package,
                  signType: res.data.data.signType, //微信签名方式：
                  paySign: res.data.data.paySign //微信签名
                },
                resData => {
                  if (resData.err_msg == "get_brand_wcpay_request:ok") {
                    // 使用以上方式判断前端返回,微信团队郑重提示：
                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    this.showToast = true;
                    this.showText = "支付成功";
                    this.getData();
                  } else {
                    this.showToast = true;
                    this.showText = "支付失败";
                  }
                }
              );
            } else {
              this.showToast = true;
              this.showText = res.data.msg;
            }
            this.showLoad = false;
          })
          .catch(() => {
            this.showLoad = false;
            this.showToast = true;
            this.showText = "网络请求超时";
          });
      }
    },
    orderStepFn() {
      this.$router.push({ path: "/orderStep", query: { id: this.order_id } });
    },
    toShop(item) {
      this.$router.push({
        path: "/shopDetail",
        query: { id: this.orderDetail.shopping_shop_id }
      });
    },
    toDetail() {
      this.$router.push({
        path: "/goodsDetail",
        query: { id: this.orderDetail.shopping_goods_id }
      });
    },
    getData() {
      let data = {
        order_id: this.order_id
      };
      orderDetails(data)
        .then(res => {
          if (res.data.code == 1) {
            let num = Number(
              (Number(res.data.data.technician_score) / 20).toFixed(1)
            );
            if (num < 4.8) {
              num = 4.8;
            }
            res.data.data["rate"] = num.toFixed(1);
            res.data.data["rateNum"] = num;
            console.log(res.data.data);
            this.orderDetail = res.data.data;
          } else {
            this.showToast = true;
            this.showText = res.data.msg;
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    }
  },
  // beforeRouteLeave(to,from,next){
  //   if(to.path == "/order"){
  //     to.meta.keepAlive = true;
  //   }else{
  //     to.meta.keepAlive = false;
  //   }
  //   next();
  // },
  created() {
    this.getData();
  }
};
</script>

<style scoped lang="less">
.orderDetailCont {
  width: 100%;
  padding-bottom: 3.75rem;
  padding-top: 0.75rem;
  box-sizing: border-box;
  background-color: #f2f3f3;
  .addressCont {
    width: 100%;
    padding: 0 4%;
    box-sizing: border-box;
    .addressItem {
      background-color: #fff;
      padding: 0.75rem;
      box-sizing: border-box;
      border-radius: 0.25rem;
      display: flex;
      width: 100%;
      align-items: center;
      margin-bottom: 0.75rem;
      .addressImg {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        text-align: center;
        line-height: 2.5rem;
        font-size: 0.9rem;
        background-color: #4fc763;
        color: white;
        margin-right: 0.75rem;
      }
      .addressInfo {
        width: 0.5rem;
        flex: 1;
        margin-right: 0.75rem;
        .infoTop {
          display: flex;
          align-items: center;
          .userName {
            font-size: 0.7rem;
            font-weight: bold;
          }
          .userTel {
            font-size: 0.6rem;
            color: #999;
            margin: 0 0.5rem;
          }
          .addressDeft {
            padding: 0.15rem 0.5rem;
            background-color: #61ccd3;
            color: white;
            font-size: 0.6rem;
            border-radius: 0.15rem;
          }
        }
        .infoAddress {
          width: 100%;
          font-size: 0.6rem;
          line-height: 0.8rem;
          max-height: 1.6rem;
          margin-top: 0.25rem;
          color: #999;
        }
      }
      .editIcon {
        font-size: 0.9rem;
        color: #61ccd3;
      }
    }
  }
  .userCont {
    width: 92%;
    margin: 0.75rem 4%;
    padding: 0.75rem;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    .userImg {
      width: 3rem;
      img {
        width: 100%;
        border-radius: 50%;
      }
    }
    .userInfo {
      flex: 1;
      margin-left: 0.75rem;
      .userName {
        display: flex;
        align-items: center;
        .nameVal {
          font-size: 0.7rem;
        }
        .regTag {
          padding: 0.05rem 0.5rem;
          background-color: #4fc763;
          color: white;
          border-radius: 0.15rem;
          font-size: 0.6rem;
          margin-left: 0.5rem;
        }
      }
      .rateCont {
        align-items: center;
        display: flex;
        font-size: 0.6rem;
        margin-top: 0.25rem;
        .tateVal {
          margin-left: 0.75rem;
          color: #666;
        }
      }
    }
  }
  .verification_code {
    width: 92%;
    margin: 0.75rem 4%;
    padding: 0.75rem;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0.25rem;
    // display: flex;
    // align-items: center;
    text-align: center;
    // justify-content: center;
    .codeNum {
      font-size: 1.2rem;
      color: #4fc763;
      margin-top: 0.25rem;
      font-weight: bold;
    }
  }
  .detailInfo {
    width: 92%;
    background-color: #fff;
    padding: 0.75rem;
    box-sizing: border-box;
    border-radius: 0.25rem;
    margin: 0.75rem auto 0;
    .shopTop {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      .shopNameCont {
        flex: 1;
        width: 0.5rem;
        display: flex;
        padding: 0.75rem 0;
        align-items: center;
        margin-right: 0.5rem;
        .shopicon {
          font-size: 1.1rem;
          margin-right: 0.25rem;
        }
        .shopName {
          font-size: 0.7rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .icon-jinrujiantou {
          font-size: 0.8rem;
          position: relative;
        }
      }
      .orderStatus {
        color: #4fc763;
        font-size: 0.6rem;
      }
    }
    .goodsList {
      width: 100%;
      .goodsItem {
        width: 100%;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        .goodsImg {
          width: 4rem;
          height: 4rem;
          overflow: hidden;
          border-radius: 0.25rem;
          margin-right: 0.5rem;
          img {
            width: 100%;
          }
        }
        .goodsInfo {
          width: 0.5rem;
          flex: 1;
          display: flex;
          flex-direction: column;
          height: 4rem;
          justify-content: space-between;
          .goodsName {
            width: 100%;
            line-height: 1rem;
            font-size: 0.7rem;
          }
          .orderTime {
            font-size: 0.6rem;
            color: #666;
          }
          .goodsType {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .goodsNumCont {
              display: flex;
              height: 1rem;
              line-height: 1rem;
              color: #999;
              font-size: 0.6rem;
              align-items: center;
            }
            .goodsTypeItem {
              padding: 0.1rem 0.5rem;
              background-color: #f6f6f6;
              font-size: 0.6rem;
              height: 1rem;
              line-height: 1rem;
              border-radius: 0.75rem;
              color: #999;
            }
            .order_cont {
              color: #666;
            }
          }
          .goodsInfoPrice {
            color: #999;
            display: flex;
            justify-content: space-between;
            font-size: 0.6rem;
          }
        }
      }
    }
    .formCont {
      width: 100%;
      .formItem {
        display: flex;
        justify-content: space-between;
        padding: 0.75rem 0;
        align-items: center;
        color: #666;
        font-size: 0.7rem;
        border-bottom: 1px dashed #ccc;
        .formVal {
          width: 1rem;
          flex: 1;
          margin-left: 0.75rem;
        }
      }
    }
  }
  .orderDesCont {
    width: 100%;
    padding: 0 4%;
    box-sizing: border-box;
    margin: 1rem 0;
  }
  .formTip {
    width: 100%;
    padding: 0.75rem 4%;
    box-sizing: border-box;
    color: #666;
    font-size: 0.6rem;
    .reportBtn {
      text-decoration: underline;
      color: #4fc763;
    }
  }
  .ctrlCont {
    width: 100%;
    padding: 0.5rem 4%;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    display: flex;
    justify-content: flex-end;
    text-align: center;
    .orderBtn {
      padding: 0.35rem 0;
      width: 25%;
      text-align: center;
      border-radius: 2rem;
      font-size: 0.7rem;
      box-sizing: border-box;
      margin-left: 0.5rem;
    }
    .pinkBtn {
      border: 1px solid #4fc763;
      color: #4fc763;
    }
    .greenBtn {
      border: 1px solid #4fc763;
      color: #4fc763;
    }
    .blackBtn {
      border: 1px solid #999;
      color: #666;
    }
  }
  .maskAddress {
    width: 100%;
    padding: 0.75rem 4%;
    box-sizing: border-box;
    .addressItem {
      background-color: #fff;
      padding: 0.5rem;
      box-sizing: border-box;
      border-radius: 0.25rem;
      display: flex;
      width: 100%;
      align-items: center;
      .addressImg {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        text-align: center;
        line-height: 2rem;
        font-size: 0.8rem;
        background-color: #61ccd3;
        color: white;
        margin-right: 0.75rem;
      }
      .addressInfo {
        width: 0.5rem;
        flex: 1;
        margin-right: 0.75rem;
        .infoTop {
          display: flex;
          align-items: center;
          .userName {
            font-size: 0.7rem;
            font-weight: bold;
          }
          .userTel {
            font-size: 0.6rem;
            color: #999;
            margin: 0 0.5rem;
          }
          .addressDeft {
            padding: 0.15rem 0.5rem;
            background-color: #61ccd3;
            color: white;
            font-size: 0.6rem;
            border-radius: 0.15rem;
          }
        }
        .infoAddress {
          width: 100%;
          font-size: 0.6rem;
          line-height: 0.8rem;
          max-height: 1.6rem;
          margin-top: 0.25rem;
          color: #999;
        }
      }
      .checkAddress {
        font-size: 0.7rem;
        color: white;
        // color: #61CCD3;
        width: 0.9rem;
        line-height: 0.9rem;
        height: 0.9rem;
        border: 1px solid #61ccd3;
        text-align: center;
        border-radius: 50%;
      }
      .checkAddressActive {
        background-color: #61ccd3;
      }
    }
  }
  .orderMask {
    padding: 0.75rem;
    box-sizing: border-box;
    .maskTitle {
      font-size: 0.8rem;
      font-weight: bold;
      text-align: center;
    }
    .maskTip {
      margin-top: 0.5rem;
      line-height: 1.1rem;
    }
  }
}
.haspadding {
  padding-bottom: 1rem;
}
</style>
